import { IEventEmitter, IWidgetExtendedProps } from "@learnware/core";
import { createApp, App } from "vue";
import { createPinia } from "pinia";
// import Antd from "ant-design-vue";
import WidgetBase from "WidgetBase";
import Antd from 'ant-design-vue';
import RootComponent from "./components/App.vue";
import { IMaterial, IPreset, createStore } from "./store/app";

interface IWidgetProps extends IWidgetExtendedProps {
  width: number;
  height: number;
  materials:Array<IMaterial>,
  preset:IPreset;
}

export default class Widget extends WidgetBase {
  vueApp: App<Element>;
  store: ReturnType<ReturnType<typeof createStore>>;
  __supportInteract: boolean = true;
  constructor(
    $el: JQuery<HTMLElement>,
    data: IWidgetProps,
    pageNumber: number,
    eventManager: IEventEmitter,
    pageId: string,
  ) {
    super($el, data, pageNumber, eventManager, pageId);
    const pinia = createPinia();
    this.vueApp = createApp(RootComponent, {});
    this.vueApp.use(Antd);
    this.vueApp.use(pinia);
    this.addClass('resources/css/main.css');
    const store = createStore(this.pageNumber, this.itemId)();
    store.setFullPath(data.fullPath);
    store.setPreset(data.preset);
    store.setClickColor(data.clickColor)
    this.store = store;
    this.vueApp.provide('store', store);
    this.vueApp.mount($el[0]);
    // debugger;
   //@ts-ignore
    window.myWidget = this;
    console.log(this);
  }
    // 交互接口 撤销
    setBack (){
      this.store.setBack(this.store.historyIndex -1)
     
      
      
    }
    submit(){
      this.store.setChangNum(this.store.changNum+1)
     
     setTimeout(()=>{
      let timestamp = Date.now();
      console.log("11",this.store.submitData);
      const blob = new Blob([JSON.stringify(this.store.submitData)], {
        type: 'application/json'
      });
      const file = new File([blob], 'data.json', {
        type: 'application/json'
      });
      if (typeof this.uploadWidgetFile === 'function') this.uploadWidgetFile(file, {timestamp});
     },1000)
    }
    refreshUI(options) {
      console.log(options.preset);
      if (options.preset) {
        this.store.setPreset(options.preset);
      }
      if(options.clickColor){
        this.store.setClickColor(options.clickColor)
      }
    }
}